<template>
    <div>
        <div id="bread">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/manage/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div id="insertButton">
            <el-button type="primary" @click="toInsert">新增管理员</el-button>
        </div>
        <div class="managerList">
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="序号"
                >
                    <template slot-scope="scope">
                        {{scope.$index+1}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="账号名"
                        prop="name"
                        width="150"
                >
                </el-table-column>
                <el-table-column
                        label="密码"
                        prop="pass"
                        width="150"
                >
                </el-table-column>
                <el-table-column
                        label="登录ip"
                        prop="ip"
                        width="150"
                >
                </el-table-column>
                <el-table-column
                        label="上次登录时间"
                        prop="loginTime"
                width="300">
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="200"
                >
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle size="mini" title="修改" @click="updateOne(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle size="mini" title="删除" @click="deleteOneManager(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="pageInfo.pageSize"
                    :total="pageInfo.total"
                    @current-change="handlePageChange"
            >
            </el-pagination>
        </div>
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: "managerList",
        data(){
            return{
                tableData:[],
                pageInfo:{},
                pageNum:1
            }
        },
        methods:{
            getAllManagers(){
                this.$axios.get("manage/getAllManagers",{params:{pageNum: this.pageNum}}).then(response=>{
                    this.tableData=response.data.managers.list;
                    this.pageInfo=response.data.managers;
                })
            },
            handlePageChange(pageNum){
                this.pageNum=pageNum;
                this.getAllManagers();
            },
            updateOne(row){
                this.$router.push({
                    path:'/manage/managerList/updateOneManager',
                    query:{id:row.id}
                });
            },
            toInsert(){
                this.$router.push("/manage/insertManager");
            },
            deleteOneManager(row){
                if (confirm("确认要删除这个管理员吗？"))
                {
                    this.$axios.get("manage/deleteOneManager",{params:{id:row.id}}).then(response=>{
                       this.getAllManagers();
                    });
                }
            }
        },
        created() {
            this.getAllManagers();
        },
        watch:{
            $route:function () {
                this.getAllManagers();
            }
        }
    }
</script>

<style scoped>
    #bread{
        margin-top: 30px;
        margin-left: 20px;
    }
    .managerList{
        margin-top: 30px;
        margin-left: 20px;
    }
    #insertButton{
        margin-top: 30px;
        margin-left: 20px;
    }
</style>